<template>
	<view>
		<view class="head">
			<view class="logo" :class="classsw">
				<image :src="logo"></image>
			</view>

			<view class="weixin" @tap='weixinclick'>
				<view @tap='bomClick' data-index='1'>
					<image class="weixin_logo" :src="weixin_logo"></image>
					<text class="weixin_text">官方微信号</text>
				</view>
				<image class="bottom_arr" :class="bottom_active1" :src="bottom_arr"></image>
			</view>
			<view class="er" :hidden='er'>
				<view class="er_wecath">
					<image :src="wecath"></image>
				</view>
				<view class="er_word1">
					<image :src="word1"></image>
				</view>
			</view>
			<view class="produce" @tap='listclick'>
				<view @tap='bomClick' data-index='2'>
					<image class="produce_image" :src="produce_logo"></image>
					<text class="produce_text">产品</text>
				</view>
				<image class="bottom_arr" :class="bottom_active2" :src="bottom_arr"></image>
			</view>
			<view class="produce-list" :hidden='produce'>
				<view v-for="(item,index) in producelist" :key="index">
					<navigator :url="item.url">
						<image class="mobile1" :src="item.mobile1"></image>
					</navigator>
					<navigator :url="item.url">
						<image class="mobile2" :src="item.mobile2"></image>
					</navigator>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				er: true,
				produce: true,
				bottom_active1:'',
				bottom_active2:'',

				bar_icon: 'https://www.frisobaby.com/resources/images/mobile/index/bar_icon.png',
				weixin_logo: '../../static/weixin_logo.png',
				bottom_arr: 'https://www.frisobaby.com/resources/images/mobile/index/bottom_arr.png',
				wecath: 'https://www.frisobaby.com/media/1746/wecath.png',
				word1: 'https://www.frisobaby.com/resources/images/mobile/index/word1.png',
				produce_logo: '../../static/produce_logo.png',
				recod: 'https://www.frisobaby.com/resources/images/pc/record.png',
				producelist: [{
						mobile1: 'https://www.frisobaby.com/media/1909/mobile导航栏产品.png',
						mobile2: 'https://www.frisobaby.com/resources/images/mobile/index/cha.png',
						url: '../friso/friso'
					},
					{
						mobile1: 'https://www.frisobaby.com/media/1750/gold01.png',
						mobile2: 'https://www.frisobaby.com/resources/images/mobile/index/cha.png',
						url: '../index/index'
					},
					{
						mobile1: 'https://www.frisobaby.com/media/1748/mama.png',
						mobile2: 'https://www.frisobaby.com/resources/images/mobile/index/cha.png',
						url: '../frisomum/frisomum'
					}
				]
			}
		},
		props:['logo','classsw'],
		methods: {
			weixinclick: function() {
				this.er = !this.er
			},
			listclick: function() {
				this.produce = !this.produce
			},
			bomClick:function(e){
				if(e.currentTarget.dataset.index == 1){
					this.bottom_active1 == ''?this.bottom_active1='bottom_active':this.bottom_active1='';
					this.produce= true;
					this.bottom_active2='';
				}else{
					this.bottom_active2 == ''?this.bottom_active2='bottom_active':this.bottom_active2='';
					this.bottom_active1='';
					this.er = true
				}
			}
		}
	}
</script>

<style>
	.head {
		background-color: #002F76;
		width: 100%;
		height: 82upx;
		position: fixed;
		z-index: 999;
		top: 0;
		left: 0;
	}

	.head .logo {
		position: absolute;
		top: 81upx;
		left: 42upx;
		z-index: -1;
		
	}
	.indexclass{
		width: 178upx;
		height: 57upx;
	}
	.frisoclass{
		width: 214upx;
		height: 92upx;
	}
	.frisomumclass{
		width: 153upx;
		height: 70upx;
	}

	.head .logo image {
		width: 100%;
		height: 100%;
	}

	.weixin {
		height: 34upx;
		margin-top: 24upx;
		position: absolute;
		left: 230upx;
	}

	.weixin .bottom_arr {
		display: inline-block;
		width: 10upx;
		height: 6upx;
		position: absolute;
		right: -12upx;
		top: 14upx;

	}
	.weixin_text{
		font-size: 20upx;
		color: #FFF;
		float: left;
		padding: 0 8upx;
	}
	.produce_text{
		font-size: 20upx;
		color: #FFF;
		float: left;
		padding: 0 8upx;
	}


	.weixin_logo {
		width: 44upx;
		height: 34upx;
		float: left;
	}

	.er {
		background-color: rgba(234, 234, 222, 0.9);
		width: 100%;
		margin-top: 82upx;
		padding-top: 46upx;
		padding-bottom: 46upx;
		position: absolute;
	}

	.er .er_wecath {
		margin-left: 95upx;
		margin-right: 34upx;
		width: 200upx;
		height: 200upx;
		float: left;
	}

	.er .er_word1 {
		margin-top: 50upx;
		width: 232upx;
		height: 100upx;
		float: left;
	}

	.er .er_wecath image,
	.er .er_word1 image {
		width: 100%;
		height: 100%;
	}

	.produce {
		height: 34upx;
		margin-top: 24upx;
		position: absolute;
		left: 440upx;
		line-height: 34upx;
	}

	.produce .produce_image {
		width: 28upx;
		height: 34upx;
		float: left;
	}
	.produce .bottom_arr {
		display: inline-block;
		width: 10upx;
		height: 6upx;
		position: absolute;
		right: -12upx;
		top: 16upx;		    
	
	}
	.bottom_active{
		transform: rotate(180deg);
	}

	.head .menu {
		width: 59upx;
		height: 45upx;
		position: absolute;
		top: 20upx;
		right: 20upx;
	}

	.head .menu image {
		width: 51upx;
		height: 34upx;
	}





	.produce-list {
		background-color: rgba(234, 234, 222, 0.9);
		width: 100%;
		margin-top: 82upx;
		padding: 45upx 0;
	}

	.produce-list view:nth-child(1) {
		margin-left: 60upx;
		text-align: center;
	}

	.produce-list view {
		display: inline-block;
		margin-left: 40px;
		text-align: center;
	}

	.produce-list view navigator {
		display: block;
		margin-top: 15upx;
	}

	.mobile1 {
		width: 150upx;
		height: 264upx;
	}

	.mobile2 {
		width: 99upx;
		height: 32upx;
	}
</style>
